<template>
  <div class="common-layout">
    <el-container>
      <el-header>
          <Header />
        </el-header>
      <el-container>
        <el-aside width="180px">
        <Layout />
      </el-aside>
        <el-main>
          <div class="main flex flex-row">
            <div class="left shadow-lg">
              <el-tree ref="treeRef" highlight-current class="tree treeBom" :default-expanded-keys="[2, 3]" @node-click="handleNodeClick"
                node-key="id" :data="treeData"></el-tree>
            </div>
            <div class="content-box">
              <div class="float-right shadow-lg">
                <el-button class="shadow-lg" color="#626aef" @click="submitForm(ruleFormRef)" :icon="Cpu">开始生成</el-button>
              </div>
              <div class="necessary p-4">
                <div class="m-1"><span class="text-xl">必填信息</span> </div>
                <div class="shadow-lg rounded-md m-2">
                  <div >
                    <el-form :inline="true" ref="ruleFormRef" :rules="rules" :model="formInline" label-position="left"
                      class="demo-form-inline p-3">
                      <el-form-item label="作业任务名称" label-width="120px" prop="deviceName">
                        <el-input style="width: 220px;" v-model="formInline.itemName" readonly />
                      </el-form-item>
                      <el-form-item label="设备名称" label-width="120px" prop="itemName">
                        <el-input v-model="formInline.deviceName" style="width: 220px;" placeholder="请输入任务名称" clearable />
                      </el-form-item>
                      <el-form-item label="设备编码"  label-width="120px" prop="deviceCode">
                        <el-input v-model="formInline.deviceCode" style="width: 220px;" readonly />
                      </el-form-item>
                      <el-form-item label="作业任务编码"  label-width="120px" prop="itemCode">
                        <el-input v-model="formInline.itemCode" style="width: 220px;" placeholder="请输入任务编码" clearable />
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- <necessary ref="stepRef" class="shadow-lg rounded-md m-2" :lable="deviceCode"></necessary> -->
              </div>
              <el-divider />
              <div class="option p-4">
                <div class="m-1"> <span class="text-xl">可选信息</span> </div>
                <other class="shadow-lg rounded-md m-2"></other>
              </div>
              <!-- <step ref="stepRef" :lable="deviceCode"></step> -->
            </div>
          </div>

        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script lang="ts" setup>
import Header from '@/components/Header/index.vue';
import Layout from '@/components/layout.vue';
import { ref, onMounted } from 'vue';
import {
  Cpu,
} from '@element-plus/icons-vue'
// import { ElLoading } from 'element-plus'
// import step from './components/step.vue'
// import necessary from '@/components/form/necessary.vue'
import other from '@/components/form/other.vue'
import { useChatStore } from '@/store/chat'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()
const useChat = useChatStore()
const stepRef = ref(null)
const ruleFormRef = ref<FormInstance>()
const treeRef = ref(null)
/** 发送消息模块 */
let message = ref('')
let sendMessage = ref('')
let deviceCode = ref('')
let data = ref() // 定义一个时间戳，方便检查是否更新发送了数据
interface RuleForm {
  deviceName: string
  deviceCode: string
  itemName: string
  itemCode: string
}
const formInline = reactive<RuleForm>({
  deviceName: '',
  deviceCode: '',
  itemName: '',
  itemCode: '',
})
const rules = reactive<FormRules<RuleForm>>({
  deviceName: [{
    required: true,
    message: '请选择设备',
    trigger: 'blur',
  }],
  itemName: [{
    required: true,
    message: '请输入任务名称',
    trigger: 'blur',
  }]
})

const treeData = ref([
  {
    label: '连铸设备', id: 1,
    children: [
      {
        label: '修磨区域',
        id: 2,
        children: [
          { label: '修磨辅助设备油压油箱', id: 4, code: '210458P01',children:[{
            label: '清洗加油', id: 1000, code: '2'
          }] },
          { label: '修磨油压系统油箱', id: 5, code: '210457P01',children:[{
            label: '清洗加油', id: 1001, code: '2'
          }]  },
          { label: '手清场上表面输送机', id: 6, code: '210434M06',children:[{
            label: '网格板更换', id: 1002, code: '2'
          }] },
          {
            label: '纵向切割机', id: 7, code: '210464M06', children: [
              { label: '纵向切割机管路', id: 8, code: '210464M06J007' ,children:[{
            label: '修复更换', id: 1003, code: '2'
          }] },
              { label: '纵向切割机回火器', id: 9, code: '210464M06J001' ,children:[{
            label: '更换', id: 1004, code: '2'
          }] },
              { label: '纵向切割机煤气调节器', id: 10, code: '210464M06J004',children:[{
            label: '更换', id: 1005, code: '2'
          }]  },
              { label: '纵向切割机煤气过滤器', id: 11, code: '210464M06J002' ,children:[{
            label: '拆检清洗', id: 1006, code: '2'
          }] }
            ]
          },

        ],
      },
      {
        label: '3CC区域',
        id: 3,
        children: [{
          label: '3CC移载机油压油箱',
          code: '420229P01',
          id: 12,children:[{
            label: '清洗加油', id: 1007, code: '2'
          }] 
        },
        {
          label: '3CC精整油压油箱 ',
          code: '420230P01',
          id: 13,children:[{
            label: '清洗加油', id: 1008, code: '2'
          }] 
        },
        ]
      },
    ],
  },
]);
/** 发送消息的方法 */
function send() {
  sendMessage.value = message.value
  data.value = Date.now()
  message.value = ''
  // console.log(data.value);
}

/** 刷新加载 */
onMounted(() => {
  // openFullScreen2();
  // window.addEventListener("keydown", keyDown);
});
/** 回车方法 */
function keyDown(e: any) {
  // 回车则执行登录方法 enter键的ASCII是13
  if (e.key == 'Enter') {
    send()
  }
}
const handleNodeClick = (node) => {  
  // deviceCode.value = node.label
  let parentNode = treeRef.value.getNode(node).parent.data
  if ('children' in node) {

  } else {
    formInline.deviceName = parentNode.label
    formInline.deviceCode = parentNode.code
    formInline.itemName = parentNode.label + node.label
  }

  // console.log();
  // stepRef.value.loglabel(node)
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      useChat.setChatInfo(formInline.itemName,formInline.deviceName)
      useChat.setCurrentNode(formInline)
      useChat.setChatState(true)
      router.push({ path: '/result' })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style scoped lang="less">
.inputStyle {
  width: 300px;
  margin-right: 10px;
}

.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
  }

  .el-header {
    padding: 0;
  }
}

.main {
  width: 100%;
  height: 100%;

  .left {
    width: 240px;
    border-top: 2px solid rgb(28, 110, 232);
  }

  .content-box {
    flex: 1;
    height: 100%;

    .float-right {
      float: right;
    }

    .necessary {
      width: 100%;
      height: 200px;
    }

    .option {
      height: calc(100% - 275px);
    }
  }
}

.bottom-area {
  position: fixed;
  bottom: 30px;
}
:deep(.el-tree-node){
  &:focus{
    .el-tree-node__content{
      background-color: #4ba1f7;
      color: white;
    }
  }
}
// :deep(.el-tree-node__content){
//   &:hover{
//     background-color: #4ba1f7 !important;
//     color: white;
//   }
// }
:deep(.el-tree-node__expand-icon) {
  font-size: 18px;
  color: #000;

  &.is-leaf {
    color: transparent;
  }
}

// :deep() {
//   .el-tree-node {
//     position: relative;
//     padding-left: 14px;

//     &::before {
//       content: "";
//       height: 100%;
//       width: 1px;
//       position: absolute;
//       left: -3px;
//       top: -26px;
//       border-width: 1px;
//       border-left: 1px solid #E9E9E9;
//     }
//   }
// }
</style>